<template>
  <div class="transfter">
    <div class="left-content">
      <p class="header-table">全部字段（{{ leftData.length }}）</p>
      <el-input
        v-model="searchLeft"
        placeholder="请输入字段名称"
        suffix-icon="Search"
        clearable
      >
      </el-input>
      <div class="table-content">
        <el-checkbox-group v-model="leftChecked">
          <el-checkbox
            class="self_checkbox"
            v-for="option in leftData"
            :key="option.props"
            :label="option.label"
            :value="option.props"
          >
            {{ option.label }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div class="center-content">
      <img @click="toRight" src="../../assets/images/toright.png" />
      <img @click="toLeft" src="../../assets/images/toleft.png" />
    </div>
    <div class="right-content">
      <p class="header-table">已选字段（{{ rightData.length }}）</p>
      <el-input
        v-model="searchRight"
        placeholder="请输入字段名称"
        suffix-icon="Search"
        clearable
      >
      </el-input>
      <div class="table-content">
        <el-checkbox-group v-model="rightChecked">
          <!-- <el-checkbox
            class="self_checkbox"
            v-for="option in rightData"
            :key="option.props"
            :label="option.label"
            :value="option.props"
          >
            {{ option.label }}
          </el-checkbox> -->
          <draggable
            class="drag-container"
            :list="rightData"
            v-model="dragData"
            direction="horizontal"
            @end="onDragEnd"
            @start="onStart"
            item-key="props"
            :disabled='searchRight'
          >
            <template #item="{ element }">
              <el-checkbox
                class="self_checkbox"
                :key="element.props"
                :label="element.label"
                :value="element.props"
              >
                <span>{{ element.label }}</span>
                <el-icon class="hovericon" color="#2263BF"
                  ><Operation
                /></el-icon>
              </el-checkbox>
            </template>
          </draggable>
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>

<script setup>
import draggable from "vuedraggable";
const props = defineProps({
  fieldList: Array
})

let leftData = ref([
  // {
  //   props: "1",
  //   label: "字段1",
  // },
  // {
  //   props: "2",
  //   label: "字段2",
  // },
  // {
  //   props: "3",
  //   label: "字段3",
  // },
  // {
  //   props: "4",
  //   label: "字段4",
  // },
  // {
  //   props: "5",
  //   label: "字段5",
  // },
]);
let searchLeft = ref("");
let leftChecked = ref([]);
let catchLeftData = ref([
  {
    props: "1",
    label: "字段1",
  },
  {
    props: "2",
    label: "字段2",
  },
  {
    props: "3",
    label: "字段3",
  },
  {
    props: "4",
    label: "字段4",
  },
  {
    props: "5",
    label: "字段5",
  },
]);

let rightData = ref([]);
let searchRight = ref("");
let rightChecked = ref([]);
let catchRightData = ref([]);
let dragData = ref([]);

const emit = defineEmits(["update:modelValue"]);

watch(()=> props.fieldList,(newval)=>{
  leftData.value = JSON.parse(JSON.stringify(newval));
},{
  deep: true,
  immediate: true
})

watch(catchRightData, (newVal) => {
  emit("update:modelValue", newVal);
},{
  deep:true
});

watch(searchLeft, (newVal) => { 
  if (newVal) {
    leftChecked.value = [];
    leftData.value = leftData.value.filter((item) => {
      return item.label.includes(newVal);
    });
  } else {
    leftData.value = JSON.parse(JSON.stringify(catchLeftData.value));
  }
});

watch(searchRight, (newVal) => {
  if (newVal) {
    rightChecked.value = [];
    rightData.value = rightData.value.filter((item) => {
      return item.label.includes(newVal);
    });
  } else {
    rightData.value = JSON.parse(JSON.stringify(catchRightData.value));
  }
});

const toRight = () => {
  for (let i = 0; i < leftChecked.value.length; i++) {
    let index = leftData.value.findIndex(
      (item) => item.props === leftChecked.value[i]
    );
    rightData.value.push(leftData.value[index]);
    catchRightData.value.push(leftData.value[index]);
    leftData.value.splice(index, 1);

    let idx = catchLeftData.value.findIndex(
      (item) => item.props === leftChecked.value[i]
    );
    catchLeftData.value.splice(idx, 1);
  }
  leftChecked.value = [];
};

const toLeft = () => {
  for (let i = 0; i < rightChecked.value.length; i++) {
    let index = rightData.value.findIndex(
      (item) => item.props === rightChecked.value[i]
    );
    leftData.value.push(rightData.value[index]);
    catchLeftData.value.push(rightData.value[index]);
    rightData.value.splice(index, 1);

    let idx = catchRightData.value.findIndex(
      (item) => item.props === rightChecked.value[i]
    );
    catchRightData.value.splice(idx, 1);
  }
  rightChecked.value = [];
};

let drag = ref(false);
const onDragEnd = (event) => {
  console.log("拖拽結束", event);
  console.log(rightData.value);
  catchRightData.value = rightData.value
};

const onStart = () => {};
</script>

<style lang="scss">
.transfter {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  margin-left: 10px;
  .center-content {
    width: 32px;
    img {
      margin: 5px 12px;
      width: 32px;
      height: 32px;
      cursor: pointer;
    }
  }
  .left-content,
  .right-content {
    width: 210px;
    border: 1px solid #eeeeee;
    .header-table {
      width: 100%;
      height: 39px;
      background: #f3f6fd;
      font-family: PingFangSC, PingFang SC;
      font-weight: blod;
      font-size: 14px;
      color: #333333;
      line-height: 39px;
      padding-left: 12px;
    }
    .table-content {
      height: 300px;
      overflow: auto;
      padding: 16px 12px;

      .self_checkbox {
        display: block;
      }
      .is-checked {
        .el-checkbox__inner {
          background: #2263bf !important;
          border: 1px solid #2263bf !important;
        }
        .el-checkbox__label {
          color: #2263bf !important;
        }
      }
    }
  }
  .right-content {
    margin-left: 24px;
  }
  .el-checkbox__label {
    width: 180px !important;
    &:hover {
      .hovericon {
        display: block;
      }
    }
    .hovericon {
      float: right;
      display: none;
    }
  }
}
</style>
